<%= stylesheet_link_tag "singers/_choose" %>

<script type="text/javascript" charset="utf-8">
    bind_method(document, "keydown", backWithPrev("<%= singers_path %>"));

    $(function () {
        var singerNavbar = root.getWidgetById("singer-navbar");
        var singerWrapper = root.getWidgetById("singer-wrapper");
        singerWrapper.focus()

        // 在 navbar 上需要有一个默认的焦点, 每当 navbar 被 focus 时, 两者不相同, 才发生替换
        var currentSingerTag = "<%= params[:singer_tag_id] %>";
        singerNavbar.on("focus", function (e) {
            if (currentSingerTag !== e.target.con.dataset.singer_tag_id) {
                // 赋值并发起 ajax 渲染
                currentSingerTag = e.target.con.dataset.singer_tag_id;
                $.ajax({
                    url: e.target.con.dataset.href + "&page=" + init_pages[currentSingerTag],
                    dataType: "script"
                }).done(function () {
                    FocusEngine.render(); // 重新渲染组件树
                });
            }
        });

        // 记录页数
        var max_pages = <%= @singer_tag_max_pages.to_json.html_safe %>;
        var init_pages = <%= @singer_tag_init_pages.to_json.html_safe %>;
        <% if params[:page].to_i > 1%>
        init_pages["<%= params[:song_tag_id] %>"] = <%= params[:page] %>;
        <% end %>

        // 左37 上38 右39 下40
        singerWrapper.on("keydown", function (e) {
            e =e || window.event;
            var keyValue = e.which || e.keyCode;
            var data = e.target.con.dataset;
            switch (keyValue) {
                case 13:
                    Cookies.set('prev', "<%= singers_choose_path %>")
                    Cookies.set("<%= singers_choose_path %>", "?singer_tag_id=" + currentSingerTag + "&page=" + init_pages[currentSingerTag] + "&row_index=" + data.row_index + "&item_index=" + data.item_index)
                    window.location.href = data.href
                    break;
                case 37:
                    // 如果是头两个元素, 页数-1, 发起请求
                    if (e.target.con.dataset.head) {
                        // 当前页码数不能用 MVVM 那一套, 所以麻烦一点
                        if (init_pages[currentSingerTag] > 1) {
                            init_pages[currentSingerTag] -= 1;
                            $.ajax({
                                url: "<%= singers_choose_path %>" + "?singer_tag_id=" + currentSingerTag + "&page=" + init_pages[currentSingerTag],
                                dataType: "script"
                            }).done(function () {
                                var targetTab = $("#singer-tab-7").get(0) ?
                                    $("#singer-tab-7").get(0) : $("#singer-tab-0").get(0);
                                FocusEngine.render(targetTab).focus();
                            });
                        }
                    }
                    break;
                case 39:
                    if (e.target.con.dataset.tail) {
                        if (init_pages[currentSingerTag] < max_pages[currentSingerTag]) {
                            init_pages[currentSingerTag] += 1;
                            $.ajax({
                                url: "<%= singers_choose_path %>" + "?singer_tag_id=" + currentSingerTag + "&page=" + init_pages[currentSingerTag],
                                dataType: "script"
                            }).done(function () {
                                var targetTab = $("#singer-tab-0").get(0);
                                FocusEngine.render(targetTab).focus();
                            });
                        }
                    }
                    break;
            }
        });

        singerWrapper.on("focus", function (e) {
            $(e.target.con).find(".marquee-truncate").marquee().trigger('forward').off('forward')
        });

        singerWrapper.on("blur", function (e) {
            $(e.target.con).find(".marquee-truncate").trigger('reset').off('reset')
        });
    });
</script>

<div id="main" fe-role="Switch">
  <div id="singer-navbar"
       class="singer-navbar"
       fe-role="Switch"
       fe-cfg="default_focus:yes,"
  >
    <ul>

      <% @singer_tags.each do |tag| %>
        <li
          data-singer_tag_id="<%= tag.serial_id %>"
          data-href="<%= singers_choose_path(singer_tag_id: tag.serial_id) %>"
          fe-role="Widget"
          <%= "fe-cfg=default_focus:yes" if tag.serial_id == params[:singer_tag_id].to_i %>
        >
            <%= tag[:name] %>
        </li>
      <% end %>     

    </ul>
  </div>

  <div id="singer-wrapper" class="singer-wrapper" fe-role="Switch">
    <%= render "singer_wrapper", singers: @singers %>
  </div>
</div>
